<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 创建一个div 挂载 vue实例 -->
    <div id="app">
        <h1>实时搜索功能</h1>
        <input type="text" v-model="search" placeholder="请输入搜索内容" />
        <ul>
            <li v-for="(item, index) in filteredResults" :key="index">
                {{ item.name }} (ID:{{ item.id }})
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                search: "",
                items: [
                    { id: "01", name: "陈家乐" },
                    { id: "02", name: "陈丽莹" },
                    { id: "03", name: "陈平" },
                    { id: "04", name: "邓惠圆" },
                    { id: "05", name: "扶云风" },
                    { id: "06", name: "付琨怡" },
                    { id: "07", name: "何成日" },
                    { id: "08", name: "何梓彤" },
                    { id: "09", name: "黄寒燕" },
                    { id: "10", name: "黄河" },
                    { id: "11", name: "黄霞萍" },
                    { id: "12", name: "李南凤" },
                    { id: "13", name: "李亚辉" },
                    { id: "14", name: "刘应昊" },
                    { id: "15", name: "龙鑫" },
                    { id: "16", name: "马赞崴" },
                    { id: "17", name: "宁扬" },
                    { id: "18", name: "欧小乐" },
                    { id: "19", name: "皮瑶" },
                    { id: "20", name: "瞿霆雨" },
                    { id: "21", name: "全叔文" },
                    { id: "22", name: "任颖佳" },
                    { id: "23", name: "王硕" },
                    { id: "24", name: "王宇昊" },
                    { id: "25", name: "王梓名" },
                    { id: "26", name: "吴彦毅" },
                    { id: "27", name: "吴耀华" },
                    { id: "28", name: "伍丹" },
                    { id: "29", name: "伍梅" },
                    { id: "30", name: "向嘉豪" },
                    { id: "31", name: "谢畅" },
                    { id: "33", name: "阳惠芝" },
                    { id: "34", name: "杨涵" },
                    { id: "35", name: "易紫俊" },
                    { id: "36", name: "余泽水" },
                    { id: "37", name: "张冰慧" },
                    { id: "38", name: "张丽萍" },
                    { id: "39", name: "张榕辉" },
                    { id: "40", name: "张智炫" },
                    { id: "41", name: "钟杰" },
                    { id: "28", name: "吴玉蓉" }
                ],
                filteredResults: [] // 储存过滤后的结果
            },
            watch: {
                search(newVal) {
                    this.filterResults(newVal);
                }
            },
            methods: {
                filterResults(keyword) {
                    if (!keyword) {
                        this.filteredResults = this.items;
                    } else {
                        this.filteredResults = this.items.filter((item) =>
                            item.name.includes(keyword) || item.id.toString().includes(keyword)
                        );
                    }
                }
            },
            mounted() {
                this.filteredResults = this.items;
            }
        })
    </script>
</body>
</html>